<!DOCTYPE html>
<html>
<head>
    <title>受灾面积管理</title>
    {% include 'system/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='system/admin/css/other/user.css') }}"/>
</head>
<body class="pear-container">
<!-- 查询表单 -->
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="" lay-filter="planting-query-form">
            <div class="layui-form-item" style="margin-bottom: unset;">
                <label class="layui-form-label">省份</label>
                <div class="layui-input-inline">
                    <input type="text" name="province_name" placeholder="省份名称" class="layui-input">
                </div>
                <label class="layui-form-label">年份</label>
                <div class="layui-input-inline">
                    <input type="text" name="year" placeholder="年份" class="layui-input">
                </div>
                <label class="layui-form-label">指标</label>
                <div class="layui-input-inline">
                    <select name="indicator" lay-search>
                        <option value="">请选择指标</option>
                    </select>
                </div>
                <button class="layui-btn layui-btn-md" lay-submit lay-filter="planting-query">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>


                <button type="reset" class="layui-btn layui-btn-primary layui-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </form>
    </div>
</div>

<div class="layui-card">
    <div class="layui-card-body">
        <table id="planting-table" lay-filter="planting-table"></table>
    </div>
</div>

<script type="text/html" id="planting-toolbar">
    {% if authorize("planting:add") %}
        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="add">
            <i class="pear-icon pear-icon-add"></i>
            新增
        </button>
    {% endif %}
</script>

<script type="text/html" id="planting-bar">
    {% if authorize("1:edit") %}
        <button class="layui-btn layui-btn-xs" lay-event="edit">
            <i class="pear-icon pear-icon-edit"> 编辑</i>
        </button>
    {% endif %}
    {% if authorize("1:remove") %}
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remove">
            <i class="pear-icon pear-icon-ashbin"> 删除</i>
        </button>
    {% endif %}
</script>

{% include 'system/common/footer.html' %}

<script>
layui.use(['table', 'form', 'layer', 'jquery'], function() {
    let table = layui.table
        , form = layui.form
        , layer = layui.layer
        , $ = layui.jquery;

    // 获取指标列表
    $.ajax({
        url: '/planting/indicators',
        type: 'GET',
        success: function(res) {
            if(res.code === 0) {
                let html = '<option value="">请选择指标</option>';
                res.data.forEach(function(item) {
                    html += '<option value="' + item + '">' + item + '</option>';
                });
                $('select[name="indicator"]').html(html);
                form.render('select'); // 重新渲染select
            }
        }
    });

    // 表格初始化
    let tableIns = table.render({
        elem: '#planting-table'
        , url: '/planting/data'
        , page: true
        , cols: [[
            {field: 'id', title: 'ID', width:80}
            , {field: 'province_code', title: '省份代码'}
            , {field: 'province_name', title: '省份名称'}
            , {field: 'year', title: '年份'}
            , {field: 'indicator', title: '播种指标'}
            , {field: 'value', title: '播种面积(公顷)'}
            , {field: 'update_time', title: '更新时间', templet: '#updateTime'}
            , {fixed: 'right', title:'操作', toolbar: '#planting-bar', width:150}
        ]]
        , toolbar: '#planting-toolbar'
        , defaultToolbar: []
    });

    // 查询表单事件处理
    form.on('submit(planting-query)', function(data) {
        tableIns.reload({
            where: data.field
        });
        return false; // 阻止表单跳转
    });

    // 添加toolbar事件监听
    table.on('toolbar(planting-table)', function(obj) {
        if (obj.event === 'add') {
            window.add();
        }
    });

    // 定义新增弹窗函数
    window.add = function() {
        layer.open({
            type: 2,
            title: '新增',
            shade: 0.1,
            area: ['550px', '550px'],
            content: '/planting/add'
        });
    };

    // 表格操作事件监听
    table.on('tool(planting-table)', function(obj) {
        let data = obj.data;
        if(obj.event === 'edit'){
            layer.open({
                type: 2
                ,title: '编辑'
                ,shade: 0.1
                ,area: ['550px', '550px']
                ,content: '/planting/edit/' + data.id
            });
        } else if(obj.event === 'remove'){
            layer.confirm('确定删除该数据？', function(index){
                $.ajax({
                    url: '/planting/delete/' + data.id,
                    type: 'DELETE',
                    success: function(res){
                        layer.close(index);
                        if(res.success) tableIns.reload();
                    }
                });
            });
        }
    });
});

// 时间格式化模板
layui.util.renderTime('#updateTime', 'update_time', 'yyyy-MM-dd HH:mm:ss');
</script>
{% include 'system/common/footer.html' %}
</body>
</html>
